<template>
  <div>
    <div
      style="
        display: flex;
        align-items: center;
        height: 60px;
        background-color: #fff;
        border-radius: 5px;
      "
    >
      <div class="container">
        <el-form :model="form" label-width="auto" style="max-width: 750px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="询价编号:">
                <el-input v-model="form.sn" /> </el-form-item
            ></el-col>
            <el-col :span="8">
              <el-form-item label="订单编号:" style="margin-left: 25px">
                <el-input v-model="form.orderSn" /> </el-form-item
            ></el-col>
            <el-col :span="8">
              <el-form-item label="状态:">
                <el-select v-model="form.status" placeholder="请选择">
                  <el-option label="待报价" value="1" />
                  <el-option label="报价中" value="2" />
                  <el-option label="已报价" value="3" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-button type="primary" style="margin-left: 15px" @click="query"
          >查询</el-button
        >
        <el-button type="primary" style="margin-left: 15px" @click="reset"
          >重置</el-button
        >
      </div>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="sn" label="询价编号" width="180" />
      <el-table-column prop="order_sn" label="订单编号" width="180" />
      <el-table-column
        prop="createTime"
        label="询价时间"
        align="center"
        width="180"
      />
      <el-table-column
        prop="status"
        label="状态"
        width="180"
        header-align="center"
        align="center"
      >
        <template #default="{ row }">
          <el-tag v-if="row.status == 1" type="primary">待报价</el-tag>
          <el-tag v-if="row.status == 2" type="warning">报价中</el-tag>
          <el-tag v-if="row.status == 3" type="success">已报价</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="原因" width="180" align="center" />
      <el-table-column label="操作" header-align="center" align="center">
        <template #default="{ row }">
          <el-button
            v-if="row.status == 1 || row.status == 2"
            type="primary"
            size="small"
            @click="jumpToPage('报价', row.sn)"
            >报价</el-button
          >
          <el-button
            v-if="row.status == 3"
            type="primary"
            size="small"
            @click="jumpToPage('修改报价', row.sn)"
            >修改报价</el-button
          >
          <el-button
            v-if="row.status == 3"
            type="primary"
            size="small"
            @click="jumpToPage('查看报价', row.sn)"
            >查看报价</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div
      style="
        display: flex;
        justify-content: center;
        height: 50px;
        margin-top: 20px;
        line-height: 50px;
        text-align: right;
      "
    >
      <el-pagination
        background
        :page-size="pageSize"
        :page-sizes="[2, 5, 10, 20, 50]"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { forwardInquiry } from "@/api/forward/forward.js";
import { onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const jumpToPage = (source1, source2) => {
  router.push({
    path: "/forwardInquiry/quote",
    query: { source1, source2 } // 携带标识符
  });
};
const page = ref(1); //当前页 默认第1页
const pageSize = ref(5); //每页记录数
const total = ref(0); //总记录数
//每页记录数变化
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从每页开始查询
  page.value = 1;
  //查询数据
  initData();
}
function chgpg(pg) {
  //更改当前页
  page.value = pg;
  //查询数据
  initData();
}
//查询条件
const form = ref({
  sn: "",
  orderSn: "",
  status: ""
});
//表格数据
const tableData = ref([]);
function query() {
  initData();
}
function reset() {
  form.value.sn = "";
  form.value.orderSn = "";
  form.value.status = "";
  initData();
}

//获取后端数据
async function initData() {
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    sn: form.value.sn,
    orderSn: form.value.orderSn,
    status: form.value.status
  };
  let res = await forwardInquiry(data);
  if (res.code == 200) {
    tableData.value = res.data.data;
    total.value = res.data.total;
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
  }
}
onMounted(() => {
  initData();
});
</script>
<style scoped>
.container {
  display: flex;
  margin-top: 20px;
  margin-left: 10px;
}
</style>
